<template>
    <view class="bg-[#F6F6F6] min-h-screen relative">
        <up-navbar title=" " :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="m-[20rpx] rounded-[16rpx] border-[#fff] bg-[#FFF] p-[30rpx] flex relative mb-[24rpx]" :class="value == index ? 'active':''" @click="checkItem(index)">
			<view class="w-[446rpx] pr-[44rpx]">
				<view class="text-[26rpx] text-[#333] font-bold mb-[20rpx]">{{ Info.name }}</view>
		    		<view class="flex items-center mb-[20rpx]">
						<image src="../static/haddress.png" mode="scaleToFill" class="w-[20rpx] h-[20rpx] block shrink-0  mr-[4rpx]"/>
						<view class="text-[22rpx] text-[#999] font-normal tracking-[1rpx]">{{ Info.address }}</view>
					</view>
					<view class="flex items-center">
						<image src="../static/htime.png" mode="scaleToFill" class="w-[20rpx] h-[20rpx] block shrink-0 mr-[4rpx]"/>
						<view class="text-[22rpx] text-[#999] font-normal tracking-[1rpx]">营业时间：{{ Info.workInfo }}</view>
					</view>
				</view>
				<up-line direction="column" :hairline="false" length="182rpx" margin=""></up-line>
				<view class="flex flex-col items-center justify-center flex-1">
					<view class="text-[22rpx] text-[#46A7FD] mb-[8rpx]">进店选购</view>
					<view class="text-[20rpx] text-[#999] font-normal leading-[36rpx] ">距离999.9km</view>
					<view class="flex items-center mt-[16rpx]">
						<image @click="callPhone" src="../static/bphone.png" mode="scaleToFill" class="w-[36rpx] h-[36rpx] block mr-[32rpx]"/>
						<image @click="Navigation" src="../static/baddress.png" mode="scaleToFill" class="w-[36rpx] h-[36rpx] block"/>
					</view>
				</view>
				<!-- <image v-if="value == index" src="../static/rgou.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block absolute bottom-[0] right-[0]"/> -->
		</view>
        <view class="m-[20rpx] rounded-[16rpx] border-[#fff] bg-[#FFF] p-[32rpx] mb-[24rpx]">
            <view class="mb-[48rpx] flex">
                <view class="mr-[24rpx]">
                    <up-image :src="baseUrl + Info.pic" width="136rpx" height="136rpx" radius="4"></up-image>
                </view>
                <view class="flex justify-between">
                    <view class="flex flex-col justify-between">
                        <view class="flex-1">
                            <view class="text-[30rpx] text-[#111] font-normal mb-[4rpx]">{{ Info.name }}</view>
                            <view class="text-[24rpx] text-[#666] font-normal w-[300rpx] line-clamp-1">地址:{{ Info.address }}</view>
                        </view>
                        <view class="flex item-center">
                            <view v-for="(item,index) in Info.feature" :key="index" class="text-[18rpx] text-[#46A7FD] font-noraml py-[2rpx] px-[10rpx] rounded-[4rpx] bg-[#DAEDFF] mr-[8rpx]">{{ item }}</view>
                        </view>
                    </view>
                    <view class="flex flex-col items-end justify-center">
                        <priceNumber :price="Info.price"></priceNumber>
                        <view class="text-[28rpx] text-[#333] font-normal">×1</view>
                    </view>
                </view>
            </view>
            <view class="flex justify-between items-center">
                <view class="text-[26rpx] text-[#333] font-normal">备注</view>
                <view>
                    <up-input placeholder="建议备注前先与商家沟通确认" border="none" v-model="value" ></up-input>
                </view>
            </view>
        </view>
        <view class="m-[20rpx] rounded-[16rpx] border-[#fff] bg-[#FFF] p-[32rpx] mb-[24rpx]">
            <view class="flex align-bottom mb-[20rpx]">
                <view class="capsule mr-[16rpx]">
                    <view class="capsuleTop"></view>
                    <view class="capsuleBottom"></view>
                </view>
                <view class="color-[#333] text-[26rpx] font-normal">预约人员</view>
            </view>
            <view>
                <view class="flex justify-between item-center py-[20rpx] border-b-[1rpx] border-[#eee]">
                    <view class="text-[26rpx] color-[#333] font-normal">预约人姓名</view>
                    <view>
                        <up-input placeholder="请输入内容" border="none" v-model="presonInfo.name" @change="change"></up-input>
                    </view>
                </view>
                <view class="flex justify-between item-center py-[20rpx] border-b-[1rpx] border-[#eee]">
                    <view class="text-[26rpx] color-[#333] font-normal">预约手机号</view>
                    <view>
                        <up-input placeholder="请输入内容" border="none" v-model="presonInfo.phone" @change="change"></up-input>
                    </view>
                </view>
            </view>
        </view>
        <view class="m-[20rpx] rounded-[16rpx] border-[#fff] bg-[#FFF] p-[32rpx] mb-[24rpx] flex items-center justify-between">
            <view class="">是否使用余额</view>
            <view><up-switch v-model="IsTrue" asyncChange @change="asyncChange" ></up-switch></view>
        </view>
        <view class="m-[20rpx] rounded-[16rpx] bg-[#fff] p-[32rpx]">
            <view class="flex justify-between items-center mb-[64rpx]">
                <view class="text-[26rpx] text-[#333] font-normal">商品金额</view>
                <view class="text-[26rpx] text-[#333] font-bold">￥{{Info.price}}</view>
            </view>
            <view class="flex justify-end items-end">
                <view class="text-[26rpx] text-[#333] font-normal">共1件，合计：</view>
                <priceNumber :price="Info.price"></priceNumber>
            </view>
        </view>
        <view class="px-[32rpx] py-[12rpx] bg-[#fff] flex justify-between items-center fixed bottom-0 left-0 w-[100%] box-border">
            <view class="flex items-center">
                <view class="text-[26rpx] text-[#999] font-normal">共1件，合计：</view>
                <priceNumber :price="Info.price"></priceNumber>
            </view>
            <view @click="Sumbit" class="py-[14rpx] px-[38rpx] bg-[#FF4D1B] text-[#fff] text-[32rpx] font-normal rounded-[40rpx]">提交订单</view>
        </view>
    </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import priceNumber from '@/components/priceNumber.vue'
import { ref } from 'vue';
import { GetTravelDetail, GetTravelPay } from '../../API/sojourn';
import env from '@/config/common.js'
let baseUrl = ref(env.API_BASE_URL_DEV)
const { goback, gohome } = useTab()
const { Sumbit , presonInfo } = useOrder()
const { id , Info , remark , IsTrue , getInfo , callPhone , Navigation , asyncChange } = useInfo()
function useTab(){
    const goback = () => {
        uni.navigateBack()
    }
    const gohome = () => {
        uni.switchTab({
            url:'/pages/index/index'
        })
    }
    return {
        goback,
        gohome
    }
}
function useInfo (){
    const id = ref(null)
    const Info = ref(null)
    const remark = ref('')
    const IsTrue = ref(true)
    const asyncChange = (e)=>{
        uni.showModal({
            content: e ? '确定使用零钱支付吗?' : '确定取消零钱支付吗?',
            success: (res) => {
                if (res.confirm) {
                    IsTrue.value = e;
                }
            },
        })
    }
    const callPhone = ()=>{
        uni.makePhoneCall({
            phoneNumber: Info.value.phone
        })
    }
    const Navigation = ()=>{
        uni.openLocation({
            latitude: Info.value.lat,
            longitude:Info.value.lng,
            scale: 18
        })
    }
    const getInfo = async(id)=>{
        let { data } = await GetTravelDetail(id)
        Info.value = data
    }
    return { id , Info , remark , IsTrue , getInfo , callPhone , Navigation , asyncChange }
}
function useOrder(){
    const presonInfo = ref({
        name:'',
        phone:''
    })
    const Sumbit = async () =>{
        let Obj = null
        let { data } = await GetTravelPay({
            travelId:Info.value.id,
            useBalance:IsTrue.value,
            presonInfoList:[{
                ...presonInfo.value
            }]
        })
        Obj = data
        if(IsTrue.value){
            uni.navigateTo({ url: '/pageOrder/AdvanceOrderList/AdvanceOrderList' })
        }else{
            uni.requestPayment({
                'timeStamp': data.timeStamp,
                'nonceStr': data.nonceStr,
                'package': data.packageValue,
                'signType': data.signType,
                'paySign': data.paySign,
                success: (res) => {
                    console.log(res);
                    uni.showToast({
                        title: '支付成功',
                        icon: 'none',
                        success: () => {
                            uni.navigateTo({ url: '/pageOrder/AdvanceOrderList/AdvanceOrderList' })
                        }
                    })
                },
                fail: (err) => {
                    console.log(err);
                    uni.showToast({
                        title: err.msg,
                        icon: 'none'
                    })
                }
            })
        }
    }
    return{
        Sumbit,
        presonInfo
    }
}
onLoad(async(options)=>{
    id.value = options.id
    await getInfo(id.value)
})
</script>

<style lang="scss" scoped>
.capsule{
    border-radius: 50rpx;
    width: fit-content;
    overflow: hidden;
    .capsuleTop{
        height: 15rpx;
        width: 8rpx;
        border-radius: 30rpx;
        transform: skewY(-10deg);
        background-color: #DAEDFF;
    }
    .capsuleBottom{
        height: 15rpx;
        width: 8rpx;
        border-radius: 30rpx;
        transform: skewY(-10deg);
        background-color: #46A7FD;
    }
}
</style>